@use 'sass:math';

.component {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.adaLogo,
.adaApiLogo {
  & > svg {
    display: block;
    opacity: 0.5;
    width: 48px;
  }
}

$cardanoLogoWidth: 86px;
.adaApiLogo > svg {
  width: $cardanoLogoWidth;
}

$adaLogoWidth: 43px;
.adaLogo > svg {
  margin: 3px math.div(($cardanoLogoWidth - $adaLogoWidth), 2) 0; // Visually align in the middle + Needs to be the same dimension as the apiLogo
  width: $adaLogoWidth;
}

.daedalusLogo {
  height: 140px;
  margin: 0 110px;
  width: 180px;
  svg {
    height: 140px;
    width: 180px;
  }
}

.connectingLogo {
  &.adaLogo {
    & svg > g > g path {
      fill: var(--theme-icon-connecting-ada-logo-color);
    }
  }
  &.daedalusLogo {
    & svg > g > g path {
      fill: var(--theme-icon-connecting-daedalus-logo-color);
    }
  }
  &.adaApiLogo {
    & svg > g > g path {
      fill: var(--theme-icon-connecting-ada-api-logo-color);
    }
  }
}

.syncingLogo {
  &.adaLogo {
    svg > g > g path {
      fill: var(--theme-icon-syncing-ada-logo-color);
    }
  }
  &.daedalusLogo {
    & svg > g > g path {
      fill: var(--theme-icon-syncing-daedalus-logo-color);
    }
  }
  &.adaApiLogo {
    & svg > g > g path {
      fill: var(--theme-icon-syncing-ada-api-logo-color);
    }
  }
}

.component,
.connectingLogo,
.syncingLogo,
.daedalusLogo,
.daedalusLogo > div {
  --webkit-backface-visibility: hidden;
}
